<link  href="__PLU__/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">
<link  href="__PLU__/magic-check/css/magic-check.min.css" rel="stylesheet">
<link  href="__PLU__/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
<script src="__PLU__/bootstrap-validator/bootstrapValidator.min.js"></script>
<script src="__PLU__/bootstrap-select/bootstrap-select.min.js"></script>
<script src="__PLU__/bootbox/bootbox.min.js"></script>
<div class="modal fade" id="nodes-modal" role="dialog" tabindex="-1" aria-labelledby="nodes-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--Modal header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">添加节点</h4>
            </div>
            <!--Modal body-->
            <div class="modal-body">
                <form id="nodes-form" class="form-horizontal" action="{:url('admin/nodes/add_node')}" method="post">
                    <div class="tab-content">
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="node-name">节点名称</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="node-name" name="node[name]">
                                <input type="hidden" id="node-id" name="node[id]" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="node-link">URL链接</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="node-link" name="node[link]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="node-parent">父节点</label>
                            <div class="col-lg-7" style="padding-left: 11px;">
                                <select class="selectpicker" id="node-parent" name="node[parent]">
                                    <option value="0">无</option>
                                    {foreach $ptnodes as $node}
                                        <option value="{$node.node_id}">{$node.name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="node-order">节点排序</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="node-order" name="node[order]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="node-icon">图标class</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="node-icon" name="node[icon]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">是否启用</label>
                            <div class="col-lg-7">
                                <div class="radio">
                                    <input id="node-use-true" class="magic-radio" type="radio" name="node[is_use]" checked="checked" value="true">
                                    <label for="node-use-true">是</label>
                                    <input id="node-use-false" class="magic-radio" type="radio" name="node[is_use]" value="false">
                                    <label for="node-use-false">否</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!--Modal footer-->
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" form="nodes-form" type="button">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('#nodes-form').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon',
            invalid: 'glyphicon',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'node[name]': {
                validators: {
                    notEmpty: {
                        message: '请输入节点名称'
                    }
                }
            },
            'node[link]': {
                validators: {
                    notEmpty: {
                        message: '请输入节点链接(没有请输入#)',
                    }
                }
            },
            'node[icon]':{},
            'node[order]':{},
        }
    });
});

$('#nodes-modal').on('show.bs.modal', function (e) {
    var nodeid = $($(e)[0].relatedTarget).data('nodeid');
    if(nodeid == undefined){
        $('#nodes-form').bootstrapValidator('resetForm', true);
        $('#node-parent').val('0');
        $('#node-id').val('');
        $('.selectpicker').selectpicker('refresh');
    }else{
        $.ajax({
            url:"{:url('admin/nodes/get_node')}",
            type:"post",
            data:{'nodeid':nodeid},
            dataType:"json",
            success:function(result){
                if(result.status == 'success'){ 
                    var node = result.data;
                    $('#node-name').val(node.name);
                    $('#node-icon').val(node.icon);
                    $('#node-link').val(node.link);
                    $('#node-parent').val(node.parent_id);
                    $('#node-id').val(node.node_id);
                    $('#node-order').val(node.order);
                    $('.selectpicker').selectpicker('refresh');
                    $('input[name="node[is_use]"][value="'+node.is_use+'"]').attr('checked','checked');
                }else{
                    $.niftyNoty({
                        type: 'warning',
                        icon : 'pli-exclamation icon-2x',
                        message : result.msg,
                        container : 'floating',
                        timer : 1500,
                    });
                }
            },
            error:function(){
                $.niftyNoty({
                    type: 'danger',
                    icon : 'pli-exclamation icon-2x',
                    message : '网络连接失败',
                    container : 'floating',
                    timer : 1500,
                });
            }
        });
    }
})
$('button[form="nodes-form"]').on('click',function(){
    $('#nodes-form').data('bootstrapValidator').validate();  
    if(!$('#nodes-form').data('bootstrapValidator').isValid()){  
        return false;
    }
    $.ajax({
        url:"{:url('admin/nodes/add_node')}",
        type:"post",
        data:$('#nodes-form').serialize(),
        dataType:"json",
        success:function(result){
            if(result.status == 'success'){
                $('#nodes-modal').modal('hide');
                $.niftyNoty({
                    type: 'success',
                    icon : 'pli-exclamation icon-2x',
                    message : result.msg,
                    container : 'floating',
                    timer : 1500,
                });
                setTimeout(function(){
                    window.location.reload();
                },1500);
            }else{
                $.niftyNoty({
                    type: 'warning',
                    icon : 'pli-exclamation icon-2x',
                    message : result.msg,
                    container : 'floating',
                    timer : 1500,
                });
            }
        },
        error:function(){
            $.niftyNoty({
                type: 'danger',
                icon : 'pli-exclamation icon-2x',
                message : '网络连接失败',
                container : 'floating',
                timer : 1500,
            });
        }
    });
});
</script>